<template>
  <div class="dashboard-container">
    <div class="title">宿舍信息</div>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-building">
            <svg-icon icon-class="building" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-placeholder">
              区域
            </div>
            <div class="card-panel-text">{{ roomInfoVo.room.building }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-floor">
            <svg-icon icon-class="floor" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-placeholder">
              楼层
            </div>
            <div class="card-panel-text">{{ roomInfoVo.room.floor }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-rno">
            <svg-icon icon-class="rno" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-placeholder">
              宿舍号
            </div>
            <div class="card-panel-text">{{ roomInfoVo.room.rno }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="people" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-placeholder">
              容量
            </div>
            <div class="card-panel-text">{{ roomInfoVo.room.capacity }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="title">宿舍风采</div>
    <el-carousel
      :interval="4000"
      type="card"
      height="480px"
      style="margin-top: 20px; margin-bottom:30px"
    >
      <el-carousel-item v-for="url in urls" :key="url">
        <img :src="url" fit="fill" height="480">
      </el-carousel-item>
    </el-carousel>
    <div class="title">宿舍成员</div>
    <el-table
      v-loading="listLoading"
      :data="roomInfoVo.studentHousingVoList"
      fit
      highlight-current-row
      style="width: 100%; margin-top: 20px; margin-bottom:30px"
    >
      <!-- <el-table-column label="学号" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.sno }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="姓名" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="性别" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.gender }}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="联系电话" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.phone }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="院系" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.department }}</span>
        </template>
      </el-table-column>
      <el-table-column label="专业" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.major }}</span>
        </template>
      </el-table-column>
      <el-table-column label="爱好" width="200px" align="center">
        <template slot-scope="{row}">
          <div v-if="row.hobby.length > 0">
            <el-tag v-for="item in row.hobby.split(',')" :key="item" type="success">{{ item }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="习惯" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.habit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="计划" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.plan }}</span>
        </template>
      </el-table-column>
      <el-table-column label="入住时间" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <i class="el-icon-time" />
          <span>{{ row.housingTime }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="title">宿舍卫生</div>
    <el-row :gutter="40" style="margin-top: 20px; margin-bottom:20px">
      <el-col v-for="hygiene in roomInfoVo.hygieneList" :key="hygiene.id" :span="6">
        <el-card class="box-card" :body-style="{ padding: '0px', height: '150px' }">
          <div :style="{ background: activeColor(hygiene.grade) }" class="component-header">
            <el-rate
              v-model="hygiene.grade"
              disabled
              :colors="colors"
            />
            <div class="checkTime"><i class="el-icon-time" />{{ hygiene.checkTime }}</div>
          </div>
          <div class="component-item">
            <mallki class-name="mallki-text" :text=" '评价：' + hygiene.remarks" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getRoomInfoVo } from '@/api/roomInfo'
import Mallki from '@/components/TextHoverEffect/Mallki'

export default {
  name: 'RoomInfo',
  components: { Mallki },
  props: {
    id: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      listLoading: true,
      roomInfoVo: {
        room: {},
        studentHousingVoList: [],
        hygieneList: []
      },
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      urls: []
    }
  },
  // 监听父组件传递过来的值并重新请求后端
  watch: {
    id: {
      handler(newValue, oldValue) {
        this.id = newValue
        this.getRoomInfoVo()
      }
    }
  },
  created() {
    this.getRoomInfoVo()
  },
  methods: {
    async getRoomInfoVo() {
      this.listLoading = true
      const res = await getRoomInfoVo(this.id)
      this.roomInfoVo.room = res.data.room
      this.roomInfoVo.studentHousingVoList = res.data.studentHousingVoList
      this.roomInfoVo.hygieneList = res.data.hygieneList
      this.listLoading = false
      // const urls = await getRoomImage(res.data.room.id)
      // this.urls = urls.data
      this.urls = res.data.room.url.split(',')
    },
    activeColor(grade) {
      if (grade === 5) {
        return '#13ce66'
      } else if (grade >= 3) {
        return '#ffba00'
      } else {
        return '#ff4949'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
    font-size: 32px;
    text-indent: 20px;
    background-image: linear-gradient(90deg, #66ccff 0px, #66ccff 5px, transparent 5px);
}
.component-header {
  height: 60px;
}
.el-rate {
  padding-top: 17px;
  padding-left: 20px;
}
.checkTime {
  float: right;
  margin-right: 10px;
  font-weight: bold;
  color: #F5F5F5;
}
.component-item {
  height: 90px;
  line-height: 90px;
  padding-left: 20px;
}
.el-tag {
  margin: 5px;
}
.dashboard-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    // cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    .icon-building {
      color: #40c9c6;
    }

    .icon-floor {
      color: #36a3f7;
    }

    .icon-rno {
      color: #f4516c;
    }

    .icon-people {
      color: #1296db;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      padding-left: 30px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;
      margin-right: 40px;

      .card-panel-placeholder {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-text {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
